<template>
  <div id="help">
    <div class="item" @click="showAgreement(2)">
      <p>中华人民共和国物权法</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <div class="item" @click="showAgreement(3)">
      <p>国务院《物业管理条例》</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <div class="item" @click="showAgreement(4)">
      <p>福建省物业管理条例</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <div class="item" @click="showAgreement(5)">
      <p>关于贯彻福建省物业管理条例的实施意见</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <div class="item" @click="showAgreement(6)">
      <p>厦门市物业管理若干规定实施细则</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <div class="item" @click="showAgreement(7)">
      <p>业主大会和业主委员会指导规则</p>
      <md-icon name="arrow-right" size="md" color="#ccc"></md-icon>
    </div>
    <md-landscape v-model="showFullScreen" full-screen>
      <clauses-list :clausesType="clausesType"></clauses-list>
    </md-landscape>
  </div>
</template>

<script>
import { Icon } from "mand-mobile";
import clausesList from "@/components/common/clausesList";

export default {
  components: {
    clausesList,
    [Icon.name]: Icon
  },
  name: "help",
  data() {
    return {
      showFullScreen: false, //
      clausesType: 1 //条款类型
    };
  },
  methods: {
    showAgreement(index) {
      this.clausesType = index;
      this.showFullScreen = true;
    }
  },
  created() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.item {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  border-bottom: 1px solid #e8e8e8;
  color: #444;
  font-size: 28px;
}
</style>
